<!--  -->
<template>
  <div>
      <div class="group">
          <div class="group_title">
              <img src="http://img1.qunarzz.com/piao/fusion/1711/16/bfbb9874e8f11402.png" alt="">
              <span>本周热门榜单</span>
              <a href="">
                  全部榜单 <i class="iconfont">&#xe60b;</i>
              </a>
          </div>
          <div class="group_list">
              <ul>
                  <li v-for="(item, index) in hotList" :key="index" @click="xiangqin(item.imgUrl,item.title)">
                      <div class="postion" ref="p">
                          <img :src="item.imgs">
                      </div>
                      <img :src="item.imgUrl" alt="">
                      <span>{{item.title}}</span>
                      <span class="s2"><a href="">￥{{item.mark}}</a>起</span>
                  </li>
              </ul>
          </div>
      </div>
      <p class="hui"  ref="p"></p>
  </div>
</template>

<script>
export default {
    props:[
       "hotList",
    ],
  data () {
    return {
        newlist:[],
        valtitle:""
    };
  },
  methods:{
      xiangqin(item,itemtext){
          this.$router.push({path:"/article",query:{text:item,concat:itemtext}})
        //   console.log(item)
          }
      
  },
}
</script>
<style scoped>
.hui{
    background:#f6f3f3;
    width: 100%;
    height: 0.26666666rem;
}
    .group{
        width: 100%;
        height: auto;
    }
    .group_title{
        width: 100%;
        height: 1.333333rem;
        position: relative;
        line-height: 1.333333rem;
    }
    .group_title img{
        width: 0.4rem;
        height: 0.4rem;
        margin-left: 0.2666666666rem;
    }
    .group_title span{
        font-size: 0.42rem;
    }
    .group_title a{
        position: absolute;
        right: 0.4rem;
        font-size: 0.3rem;
        color: #616161;
        text-decoration: none;
    }
    .group_list{
        width: 100%;
        height: auto;
        overflow: hidden;
        overflow-x: scroll; 
        padding-bottom: 0.1333333rem;
    }
    .group_list ul{
        width: 100%;
        padding: 0   0.266666666rem;
        display: flex; 
    }
    .group_list ul li{
        width: 2.66666666rem;
        height: auto;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        margin-left: 0.26666666rem;
        position: relative;
    }
    .group_list ul li img{
        width: 2.66666666rem;
        height:2.66666666rem;
    }
    .group_list ul li span{
        font-size: 0.27rem;
        margin-top: 0.16666666rem;
    }
    .group_list ul li span  a{
        text-decoration: none;
        font-size: 0.27rem;
        color: #ff8300;
    }
    .group_list ul li .s2{
        margin-top: 0.1rem;

    }
    .postion img{
        width: 42px !important;
        height: 20px !important;
        position: absolute;
        border: none;
        outline: none;
        left: 0;
    }
    .postion{
        outline: none;
    }
</style>